<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>定位</title>
	<link rel="stylesheet" type="text/css" href="css/css_reset.css">
</head>
<!-- position:static 静态
		
		1.相对定位 position:relative;
			不脱离标准文档流，可以调整元素参考点
			参考点是以原来的位置作为参考点
		2.绝对定位 position:absolute;
			脱离标准文档流，不在页面上占位置
			压盖现象，压盖被人
			相对于最近的非static祖先元素定位，如果没有非static祖先元素，那么以页面根元素左上角定位
		3.固定定位 position:fixed;
			脱离标准文档流
			一旦设置固定定位，在页面中滚动不变
			参考点以浏览器的左上角为点
	-->
	<style type="text/css">
		.container{
			width: 1024px;
			height: 100%;
			border: 1px solid green;
			margin: 0 auto;

		}
		.container p{
			margin-bottom: 200px;
		}
		.picture{
			position: fixed;
			width: 27px;
			bottom: 100px;
			right: 50%;
			margin-right: -540px;
		}
		.picture ul li{
			border: 1px solid #f5f5f5;
			background-color: #fff;
			width: 40px;
			height: 45px;
			border-top: none;
		}
		.picture ul li.one{
			border-top: 1px solid #f5f5f5;
		}
		.picture ul li a{
			display: block;
			width: 20px;
			height: 20px;
			margin-left: 8px;
			padding-top: 9px;
		}
		.picture ul li a img{
			width: 25px;
		}
		.test{
			float: left;
			width: 200px;
			background-color: red;
			height: 20px;
		}
	</style>
<body>
	

	<!-- 固定案例 -->
	<div class="container">
		<p>我是你的爹</p><br>
		<p>我是你的爹</p><br>
		<p>我是你的爹</p><br>
		<p>我是你的爹</p><br>
		<p>我是你的爹</p><br>
		<p>我是你的爹</p><br>
		<p>我是你的爹</p><br>
		<p>我是你的爹</p><br>


	</div>
	<div class="picture">
		<ul>
			<li class="one">
				<a href="#">
					<img src="images/001.png">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/002.png">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/003.png">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/004.png">
				</a>
			</li>
		</ul>
	</div>
	<span class="test">woshi span</span>
</body>
	
</html>